<template>
    <div>
        <!-- breadcrumb -->
        <div class="breadcrumb">
            <div class="container clear">
                <div class="breadcrumb-main clear">
                    <div class="breadcrumb-hd">您的位置：</div>
                    <ul class="breadcrumb-bd clear">
                        <li class="breadcrumb-item">
                            <router-link to="/">首页</router-link>
                        </li>
                        <li class="breadcrumb-item cur">关于我们</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="about">
            <div class="about-main">
                <div class="about-img">
                    <img src="../assets/images/about-banner.png" alt="">
                </div>
                <div class="about-img" style="height: 1035px;">
                    <img src="../assets/images/about.png" alt="">
                </div>
                <div class="about-img" style="height: 1453px;">
                    <img src="../assets/images/about2.png" alt="">
                </div>
                <div class="about-img" style="height: 60px;">
                    <img src="../assets/images/about3.png" alt="">
                </div>
                <div class="container clear">
                    <div class="about-con-item">
                        <img src="../assets/images/about4.png" alt="" style="  margin-top: 74px; margin-left: -122px;">
                    </div>
                    <div class="about-con-item">
                        <div style="width: 590px;height: 350px;margin-top: 50px;" id="allmap"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 置顶 -->
        <go-top></go-top>
    </div>
</template>
<script type="text/javascript" src=""http://api.map.baidu.com/api?key=&v=1.1&services=true"">

// 百度地图API功能
// var map = new BMap.Map("allmap");
// var point = new BMap.Point(113.885964, 22.555198);
// var marker = new BMap.Marker(point);  // 创建标注
// map.addOverlay(marker);              // 将标注添加到地图中
// map.centerAndZoom(point, 19);
// map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
// var opts = {
//     width: 200,     // 信息窗口宽度
//     height: 100,     // 信息窗口高度
//     title: "深圳前海云享新零售科技有限公司", // 信息窗口标题
//     enableMessage: true//设置允许信息窗发送短息
// }
// var infoWindow = new BMap.InfoWindow("地址：深圳市宝安区海秀路荣超滨海大厦B座409-410", opts);  // 创建信息窗口对象 
// map.openInfoWindow(infoWindow, point); //开启信息窗口

</script>
<script>
import goTop from '../components/gotop'
export default {
    data() {
        return {

        }
    } , 
    components: {
        goTop: goTop
    }
}
</script>

<style>
.about-main {
    border-radius: 5px;
    background: #fff;
    padding: 0 0 50px;
    margin-bottom: 50px;
    text-align: center;
}

.about-img {
    height: 370px;
    position: relative;
    overflow: hidden;
}

.about-img img {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -969px;
}

.about-main .about-item {
    margin-top: 50px;
    text-align: left;
    font-size: 16px;
    padding-bottom: 45px;
}

.about-item .about-hd h3 {
    border-top: 2px solid #3fb0ea;
    padding-left: 50%;
    width: 165px;
    text-align: center;
    margin-left: -73px;
}

.about-item .about-hd h3 span {
    font-size: 25px;
    margin-bottom: 15px;
    background: #f00;
    color: #fff;
    background: #3fb0ea;
    padding: 5px 10px;
    width: 145px;
    font-weight: normal;
    display: block;
}

.about-item .about-bd {
    line-height: 150%;
    font-size: 28px;
    color: #464646;
    width: 1000px;
    margin: auto;
    text-align: justify;
}
.about-con-item {
	width: 50%;
	float: left;
}
</style>